<script setup>
import {ref} from "vue";
import {getGroupData} from "@/api/mock";
import router from "@/router";
import { ElMessage, ElMessageBox } from 'element-plus'

const open = () => {
    ElMessageBox.confirm(
        '是否通过审核?',
        '审核',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '审核通过',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '审核不通过',
            })
        })
}
const dialogFormVisible = ref(false);
const titleName = ref('')
const showAddDialog =(title)=>{
    titleName.value = title
    dialogFormVisible.value = true
}
const formData = ref ({
    groupName:'',
    area:'',
    leader:''
})
const getGroupList =()=>{
    getGroupData().then(res=>{
        if (res.status) {
            groupListData.value = res.data.tableData
        }
    })
}
getGroupList()
</script>

<template>
    <div class="header">
        <span>活动审批/活动详细</span>
    </div>
    <el-card >
        <template #header>
            <div class="card-header">
                <span class="info-span1">活动活动活动活动活动活动活动</span>
                <el-form-item  style="float: right;margin-right: 20px" >
                    <el-button class="button2" type="primary"  plain @click="open">
                        <el-icon class="button2-1"><Plus /></el-icon>
                        <div class="button2-2">审核</div>
                    </el-button>
                </el-form-item>
            </div>

            <div class="card-main">
                <span class="info-span">计划活动时间：2024-07-04 至 2024-07-13</span>
                <span class="info-span">招宣年度：2024年</span>
            </div>
            <div class="erweima" style="float: right">
                <img src="@/assets/er.png" class="erweima-1">
                <div class="erweima-2">下载二维码</div>
            </div>
        </template>
        <div class="card-add">
            <el-row style="width: 1000px">
                <el-col :span="6"><div class="blue-circle" style="float: left">
                    <el-icon :size="30"><LocationFilled /></el-icon>
                </div>
                    <div class="info-text" style="float: right;margin-right:27% ">
                        <span class="info-span2">活动区域</span>
                        <span class="info-span3">四川省/眉山市/彭山区</span>
                    </div>
                </el-col>
                <el-col :span="6"><div class="blue-circle" style="float: left">
                    <el-icon :size="30"><UserFilled /></el-icon>
                </div>
                    <div class="info-text" style="float: right;margin-right:42% ">
                        <span class="info-span2">活动牵头宣传组</span>
                        <span class="info-span3">宣传组名称</span>
                    </div>
                </el-col>
                <el-col :span="6"><div class="blue-circle" style="float: left">
                    <el-icon :size="30"><Avatar /></el-icon>
                </div>
                    <div class="info-text" style="float: right;margin-right:50% ">
                        <span class="info-span2">活动创建人</span>
                        <span class="info-span3">张三</span>
                    </div>
                </el-col>
                <el-col :span="6"><div class="blue-circle" style="float: left">
                    <el-icon :size="30"><Tools /></el-icon>
                </div>
                    <div class="info-text" style="float: right;margin-right:57% ">
                        <span class="info-span2">活动来源</span>
                        <span class="info-span3">休息</span>
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-card>

    <!--    活动介绍-->
    <el-card style="margin-top: 20px;height: 600px">
        <el-form inline>
            <el-form-item >
                <img src="@/assets/组%20438.png" class="logo1">
                <div class="logo1-wenzi">活动介绍</div>
            </el-form-item>
            <el-form-item  style="float: right">
                <el-button class="button2" type="primary" @click="showAddDialog('添加活动')">
                    <el-icon class="button2-1"><Plus /></el-icon>
                    <div class="button2-2">编辑</div>
                </el-button>
            </el-form-item>
        </el-form>
        <!--    内容-->
        <el-text class="nr" size="large">活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍
            活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍
        </el-text>

    </el-card>
    <!--抽屉-->
    <el-drawer v-model="dialogFormVisible" direction="rtl">
        <template #title>
            <h4>{{titleName}}</h4>
        </template>
        <template #default>
            <el-form ref="form" :model="formData"  label-position="top" :rules="rules">
                <el-form-item label="活动名称" label-width="180"  prop="username">
                    <el-input v-model="formData.groupName" autocomplete="off" placeholder="请输入活动名称" />
                </el-form-item>
                <el-form-item label="活动内容" label-width="180" prop="email">
                    <el-input v-model="formData.area" autocomplete="off" placeholder="请输入活动内容" />
                </el-form-item>
                <el-form-item label="联系电话" label-width="180" prop="gender">
                    <el-input v-model="formData.leader" autocomplete="off" placeholder="请输入联系电话" />
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmClick">确定</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<style scoped lang="scss">
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}
.card-header{
    margin-bottom: 10px;
}
.info-span {
    margin-right:50px;
}
.info-span1 {
    font-weight: bold;
    font-size: 30px;
}
.info-span2 {
    margin-bottom: 5px;
    display: block;
    font-size: 13px;
}
</style>